<template>
 <div>
   <div class="h-80p px-20 shopping-top">
    <div class="mask"></div>
      <div class="flex align-center  zIndex">
        <p class="f18 f-bold c-blue cp mr-20" @click="goToHome">苏苏生鲜</p>
        <p class="f16 f-bold c-blue mr-20">购物车</p>
        <p class="fc-white f14">温馨提示：产品是否购买成功,以最终下单未准哦，请尽快结算</p>
      </div>
   </div>
   <div class="m-auto w-90">
     <Table
      ref="table"
      :columns="tableColumn"
      :data="tableData"
      @on-select="onSelect"
      @on-select-all="onSelectAll"
      @on-select-cancel="onSelect"
      @on-select-all-cancel="onSelectAll"
      ></Table>
      <div class="mt-20 bg-white flex align-center justify-between px-80" style="height:80px">
        <div class="flex align-center justify-center">
          <Button type="text" class="fc-blue" size="large" @click="goToHome">继续购物</Button>
          <span>|</span>
          <p class="f16 ml-20">共 <span class="fc-blue">{{ sum }}</span> 件商品</p>
        </div>
       <div class="fc-blue flex align-center">
         <div class="flex align-center mr-20">
          <p class="mr-10 f16">合计(不含运费):</p>
          <p class="f28">{{ sumPrice / 100 }}元</p>
         </div>
        <Button type="primary" size="large" @click="goToPersonalCenter">去结算</Button>
       </div>
      </div>
   </div>
   <fc></fc>
 </div>
</template>
<script>
import { cartList, delCart, updateCart, selectAll, selected } from 'api'
import shopping from '@/mixins/shoppingMixins.js'
import fc from 'components/floor-component'
import { Button } from 'view-design'
export default {
  name: '',
  mixins: [shopping],
  components: {
    fc
  },
  data () {
    return {
      tableData: [],
      tableColumn: [
        {
          type: 'selection',
          width: 60,
        },
        {
          title: '商品图片',
          align: 'center',
          render: (h,params) => {
            return <img style="width:80px;height:80px" class="mt-10" src={ this.baseURL + params.row.productImage} />
          }
        },
        {
          title: '商品名称',
          key: 'productName',
          align: "center",
          width: "220",
        },
        {
          title: '单价',
          key: 'price',
          align: "center",
          render: (h, params) => {
            return <div>{ params.row.price / 100 }元</div>
          }
        },
        {
          title: '数量',
          key: 'quantity',
          align: "center",
          render: (h,params) => {
            return <div class="flex align-center justify-center">
              <Button onClick={this.reduceQuantity.bind(this,params.row)}>-</Button>
              <p class="mx-10">{params.row.quantity}</p>
              <Button onClick={this.addQuantity.bind(this,params.row)}>+</Button>
            </div>
          }
        },
        {
          title: '小计',
          key: 'totalPrice',
          align: "center",
          render: (h,params) => {
            return <div>{ params.row.totalPrice / 100 }元</div>
          }
        },
        {
          title: '操作',
          type: 'button',
          align: "center",
          render: (h,params) => {
           return <Button type="error" onClick={this.delItem.bind(this,params.row)}>删除</Button>
          }
        }
      ],
      sum: 0,
      sumPrice: 0,
    }
  },
  created() {
    this.cartList()
  },
  mounted() {
  },
  methods: {
    // 购物车列表
    cartList(data) {
      cartList(data).then(res => {
        this.tableData = res
        this.sum = 0
        this.sumPrice = 0
        this.tableData.forEach(ele => {
          ele._checked = Boolean(ele.selected)
          if (ele.selected) {
            this.sum += ele.quantity
            this.sumPrice += ele.totalPrice
          }
        })
      })
    },
    // 更新购物车
    updateCart (data) {
      updateCart(data).then(res => {
        this.cartList()
      })
    },
    // 前往首页
    goToHome () {
      this.$router.push({
        path: '/index',
      })
    },
    // 前往订单中心
    goToPersonalCenter() {
      let arr = []
      this.tableData.forEach(ele => {
        if (ele.selected === 1) {
          arr.push(ele)
        }
      })
      this.$router.push({
        path: '/order-detail',
        query: {
          data: JSON.stringify(arr)
        }
      })
    },
    // 单选事件
    onSelect(item, row) {
      selected({ productId: row.productId, selected: Number(!row.selected) }).then(res=>{
        this.sum = 0
        this.sumPrice = 0
        this.tableData = res
        this.tableData.forEach(ele => {
          ele._checked = Boolean(ele.selected)
          if (ele.selected) {
            this.sum += ele.quantity
            this.sumPrice += ele.totalPrice
          }
        })
      })
    },
    // 多选事件
    onSelectAll (item) {
      let status = item.length? 1: 0
      this.sum = 0
      this.sumPrice = 0
      selectAll(status).then(res => {
        res.forEach(ele => {
          if (ele.selected) {
            this.sum += ele.quantity
            this.sumPrice += ele.totalPrice
          }
        })
      })
    },
    // 添加数量
    addQuantity (item) {
      this.updateCart({ productId: item.productId, count: item.quantity + 1 })
    },
    // 减少数量
    reduceQuantity (item) {
      if (item.quantity <= 1) {
        item.quantity = 1
      } else {
        this.updateCart({ productId: item.productId, count: item.quantity - 1 })
      }
    },
    // 删除商品
    delItem (item) {
      this.$Modal.confirm({
        title: `您确认要删除<span class="fc-red">${item.productName}</span>这个商品吗?`,
        onOk: () => {
          delCart(item.productId).then(res => {
            this.$Message.success('删除成功')
            this.cartList()
          })
        }
      })
    }
  }
}
</script>
<style lang='css' scoped>
.c-blue{
  color: rgb(10, 245, 245);
}
.shopping-top{
  position: relative;
  background-size: cover;
  background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0427%2F2810f7e1j00qs7lpe00x8c0014000p0c.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650175797&t=e9009e6826fa2310a92e9b517dcf204d);
  border-bottom: 4px solid rgb(27,174,174);
}
.zIndex{
  top: 0;
  left: 20px;
  right: 0;
  bottom: 0;
  z-index: 100;
  position: absolute;
}
.mask{
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  position: absolute;
  background: rgba(95, 92, 92, 0.2);
  backdrop-filter: blur(14px) saturate(100%);
}
</style>